<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>organization tree</title>
    <link rel="stylesheet" th:href="@{/JQuery-zTree-v3.5.15/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>

<ul id="tree" class="ztree"></ul>
<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/JQuery-zTree-v3.5.15/js/jquery.ztree.all-3.5.min.js}"></script>

<script th:inline="javascript">
    $(function () {
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {
                    parent.frames['content'].location.href = "/organization/" + treeNode.id + "/maintain";
                }
            }
        };

        var nodes = [[${organizationJsonStr}]];
        var jsonNodes = JSON.parse(nodes);
        var zNodes = new Array();
        for (var i = 0; i < jsonNodes.length; i++) {
            zNodes.push({
                id: jsonNodes[i].id,
                pId: jsonNodes[i].parentId,
                name: jsonNodes[i].name,
                open: jsonNodes[i].rootNode
            })
        }

        $(document).ready(function () {
            $.fn.zTree.init($("#tree"), setting, zNodes);
        });
    });
</script>

</body>
</html>